<template>
	<view>
		<view class="navBox">
			<u-navbar title="运输轨迹"></u-navbar>
		</view>

		<view class="container">
			<map id='map' :latitude="latitude" :longitude="longitude" :markers="covers"
				:style="{ width: '100%', height: mapHeight + 'px' }" :scale="12" :polyline="polyline">
			</map>

			<!-- <view class="btnBox">
				<button :disabled="isDisabled" @click="start" class="cu-btn bg-blue round shadow lg">轨迹回放</button>
			</view> -->
		</view>
	</view>
</template>

<!-- 注：vue只支持小程序及H5，如打包App，请修改代码为nvue，或加群要文件 -->

<script>
	export default {
		data() {
			return {
				map: null,

				windowHeight: 0,
				mapHeight: 0,
				timer: null,

				isDisabled: false,
				isStart: false,
				playIndex: 1,
				ddId: '',
				type: '',
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 0,
				longitude: 0,
				// 标记点
				covers: [{
					id: 1,
					width: 42,
					height: 47,
					rotate: 270,
					latitude: 0,
					longitude: 0,
					iconPath: '../../static/images/qidian.png',
					callout: {
						// content: "陕A·88888", // 车牌信息
						// display: "ALWAYS",
						// fontWeight: "bold",
						// color: "#5A7BEE", //文本颜色
						// fontSize: "12px",
						// bgColor: "#ffffff", //背景色
						// padding: 5, //文本边缘留白
						// textAlign: "center",
					},
					anchor: {
						x: 0.5,
						y: 0.5,
					},
				}],

				// 线
				polyline: [],

				// 坐标数据
				coordinate: [],
				posi: { // 汽车定位点的数据，后面只用改latitude、longitude即可
					id: 1,
					width: 32,
					height: 32,
					latitude: 0,
					longitude: 0,
					iconPath: "../../static/images/car.png",
					callout: {
						// content: "陕A·85Q1Q", // 车牌信息
						// display: "ALWAYS",
						// fontWeight: "bold",
						// color: "#5A7BEE", //文本颜色
						// fontSize: "12px",
						// bgColor: "#ffffff", //背景色
						// padding: 5, //文本边缘留白
						// textAlign: "center",
					},
					anchor: {
						x: 0.5,
						y: 0.5,
					},
				},
				zdposi: {
					id: 1,
					width: 32,
					height: 32,
					latitude: 0,
					longitude: 0,
					iconPath: "../../static/images/zhongdian.png",
					
					anchor: {
						x: 0.5,
						y: 0.5,
					},
				}
			}
		},
		watch: {

		},
		onLoad(option) {
			console.log(option)
			const item = JSON.parse(decodeURIComponent(option.item));
			console.log(item)
			this.ddId = item.ORMTB470ID
			this.type = item.type
			// 创建map对象
			this.map = uni.createMapContext('map');
			// 获取屏幕高度
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight;
				}
			});
			this.querMasg()

		},
		onReady() {

		},
		mounted() {
			this.setNavTop('.navBox')
		},
		methods: {
			setNavTop(style) {
				let view = uni.createSelectorQuery().select(style);
				view.boundingClientRect(data => {
						console.log("tabInList基本信息 = " + data.height);
						this.mapHeight = this.windowHeight - data.height;
						console.log(this.mapHeight)
					})
					.exec();
			},

			transformFromWGSToGCJ(latitude, longitude) {

				var lat = "";
				var lon = "";
				var ee = 0.00669342162296594323;
				var a = 6378245.0;
				var pi = 3.14159265358979324;
				lat = latitude;
				lon = longitude;
				var adjustLat = this.transformLatWithXY(longitude - 105.0, latitude - 35.0);
				var adjustLon = this.transformLonWithXY(longitude - 105.0, latitude - 35.0);
				var radLat = latitude / 180.0 * pi;
				var magic = Math.sin(radLat);
				magic = 1 - ee * magic * magic;
				var sqrtMagic = Math.sqrt(magic);
				adjustLat = (adjustLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
				adjustLon = (adjustLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
				latitude = latitude + adjustLat;
				longitude = longitude + adjustLon;
				return {
					latitude: latitude,
					longitude: longitude
				};

			},

			transformLatWithXY(x, y) {
				var pi = 3.14159265358979324;
				var lat = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
				lat += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
				lat += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
				lat += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
				return lat;
			},

			transformLonWithXY(x, y) {
				var pi = 3.14159265358979324;
				var lon = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
				lon += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
				lon += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
				lon += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
				return lon;
			},


			querMasg() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.binary = ''
				uni.request({
					url: this.baseUrl + '/orm/ormtb470/getTrack',
					method: 'POST',
					dataType: 'json',
					data: {
						ORMTB470ID: this.ddId,
					},
					success: (res) => {
						console.log(res);
						uni.hideLoading();
						if (res.data.code == 200) {
							var data = res.data.data
							this.coordinate = data
							for (var i = 0; i < this.coordinate.length; i++) {
								var result = this.transformFromWGSToGCJ(this.coordinate[i].latitude, this
									.coordinate[i].longitude)
								this.coordinate[i].latitude = result.latitude
								this.coordinate[i].longitude = result.longitude
							}
							var theMiddle = Math.floor(this.coordinate.length / 2); // index 2
							var value = this.coordinate[theMiddle]; // 数组中间位置的值 




							var arrLast = this.coordinate.pop() //数组最后位置的值 

							this.latitude = value.latitude
							this.longitude = value.longitude
							this.covers[0].latitude = this.coordinate[0].latitude
							this.covers[0].longitude = this.coordinate[0].longitude

							if (this.type == 'succs') {
								this.zdposi.latitude = arrLast.latitude
								this.zdposi.longitude = arrLast.longitude
								this.covers.push(this.zdposi)
							} else {
								this.posi.latitude = arrLast.latitude
								this.posi.longitude = arrLast.longitude
								this.covers.push(this.posi)
							}

							this.polyline = [{
								points: this.coordinate,
								color: '#28f',
								width: 15,
								dottedLine: false,
							}];


						} else {
							uni.showToast({
								title: res.data.message,
								type: 'default',
								icon: false
							})
						}
					},
					fail: (res) => {
						console.log(res)
						uni.hideLoading();
						uni.showToast({
							title: res.errMsg,
							type: 'default',
							icon: false
						})
					}
				});
			},


			start() {
				this.isStart = true;
				this.isDisabled = true;
				let data = this.coordinate;
				let len = data.length;
				let datai = data[this.playIndex];
				let _this = this;

				_this.map.translateMarker({
					markerId: 1,
					autoRotate: true,
					destination: {
						longitude: datai.longitude, // 车辆即将移动到的下一个点的经度
						latitude: datai.latitude, // 车辆即将移动到的下一个点的纬度
					},
					duration: 700,
					complete: function() {
						_this.playIndex++;
						if (_this.playIndex < len) {
							_this.start(_this.playIndex, data);
						} else {
							console.log('okokok');
							uni.showToast({
								title: '播放完成',
								duration: 1400,
								icon: 'none'
							});
							_this.playIndex = 0;
							_this.isStart = false;
							_this.isDisabled = false;
						}
					},
					animationEnd: function() {
						// 轨迹回放完成 处理H5端
						_this.playIndex++;
						if (_this.playIndex < len) {
							_this.start(_this.playIndex, data);
						} else {
							console.log('okokok');
							uni.showToast({
								title: '播放完成',
								duration: 1400,
								icon: 'none'
							});
							_this.playIndex = 0;
							_this.isStart = false;
							_this.isDisabled = false;
						}
					},
					fail(e) {
						// 轨迹回放失败
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
	}

	.btnBox {
		width: 750rpx;
		position: absolute;
		bottom: 60rpx;
		z-index: 99;
		display: flex;
		justify-content: space-around;
	}
</style>
